<template>
  <view>
    <!-- 简单单数据实现  -->
    <view class="header">
      <view class="h_btn">
        <image src="/static/vicon/search.svg" mode=""></image>
        <image src="/static/images/zhibo.svg" mode=""></image>
      </view>
    </view>
    <!-- 增加导航栏过渡效果 -->
    <view class="nav">
      <scroll-view scroll-x="true" enable-flex class="navScroll">
        <!--  导航栏 -->
        <view class="navItem" v-for="(item, index) in navList" :key="index">
          <view :class="navId === index ? 'navCount active' : 'navCount'" @click="toNav(index)">{{ item }}</view>
        </view>
      </scroll-view>
    </view>
    <!-- 视频区域 -->
    <swiper class="videoListSwiper" @change="swiperXChange" :current="navId" circular interval="1000">
      <swiper-item class="typeSwiperItem" v-for="navid in 5" :key="navid">
        <swiper vertical="true" class="videoListSwiper" @change="swiperYChange">
          <block v-for="(item, index) in videoList" :key="index">
            <swiper-item class="swiperItem">
              <video :id="navid + 'v' + index" :data-index="item._id" play-btn-position="center" :src="item.src"
                :autoplay="navid + 'v' + index === videoId ? !videoState : videoState" loop enable-play-gesture
                show-play-btn="false" :object-fit="videoBord" @play="handleVideo" @timeupdate="timeUpdate"
                @ended="handleEnded" style="width: 100%; height:100%">
                <!-- 覆盖组件 可封装组件 -->
                <!-- 可操作部分 -->
                <cover-view class="container">
                  <cover-image class="c_icon" :src="item.href" style="width: 80rpx; height: 80rpx; border-radius: 50%">
                  </cover-image>
                  <cover-image class="c_icon" @click="changeLike(item._id,item.like)"
                    :src="item.like === 1 ? '/static/vicon/love-active.svg' : '/static/vicon/love.png'">
                  </cover-image>
                  <cover-view>{{ item.like_n }}</cover-view>
                  <cover-image class="c_icon" @click="changeCollect(item._id)"
                    :src=" item.flag ? '/static/vicon/collect-active.svg' :'/static/vicon/collect.png'">
                  </cover-image>
                  <cover-view>{{ item.sms_n }}</cover-view>
                  <cover-image class="c_icon" src="/static/vicon/share.png">
                  </cover-image>
                  <cover-view>{{ item.playNumber }}</cover-view>
                  <cover-image class="c_icon" src="/static/vicon/message1.png" @click="toggle('bottom',item.pinlun)">
                  </cover-image>
                  <cover-view>{{ item.pinlun.length }}</cover-view>
                  <cover-image class="c_icon" src="/static/vicon/message.png">
                  </cover-image>
                </cover-view>
				<!-- <tag></tag> -->
				<!-- <description></description> -->
                <my-isShowInfo :item="item" :navId="navid" :index="index"></my-isShowInfo>
              </video>

            </swiper-item>
          </block>
        </swiper>
      </swiper-item>
    </swiper>

    <!-- 弹窗 -->
    <view class="u-popup">
      <!-- 普通弹窗 -->
      <uni-popup ref="popup" @change="change">
        <view class="popup-content" style="background-color: #fff">
          <!-- 评论头部 -->
          <view class="popup-header">
            <view class="infoNum"> {{pinlun.length}}条评论</view>
            <!-- 关闭按钮 -->
            <view class="popup-close">
              <image src="/static/images/delete.png" mode="" @click="popupClose"></image>
            </view>
          </view>
          <view class="noPinlun" v-if="pinlun.length ===0" style="text-align: center;">暂无评论</view>
          <view class="" v-else>
            <scroll-view scroll-y="true" style="height: 100%">
              <view class="scrollContainer">
                <view class="infoLeft">
                  <image src="/static//images/ic_13.jpg" mode=""></image>
                </view>
                <view class="infoRight">
                  <view class="uName"> 昵称 </view>
                  <view class="uMessage">评论客家话客家话好看#看见了空间了框架lkjklk健康和看看环境开会看见好看好看哈哈好看好看好看了看看就客家话
                    艰苦好看就开了很快会回来看了看老客户可厉害了李凯客户了客户空间和客户离开了尽快花见花开好看好看看hlll</view>
                  <view class="oterInfo">
                    <view class="time">{{new Date().toLocaleDateString()}} </view>
                    <view class="toMessage"> 回复 </view>
                  </view>
                </view>
              </view>
            </scroll-view>

          </view>
        </view>
      </uni-popup>
      <!-- 普通弹窗 -->
    </view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapMutations,
    mapState
  } from 'vuex'
 
  export default {
    data() {
      return {
        videoList: [],
        videoIndex: 0, // 视频 标识
        videoUpdateTime: [], // 视频播放时长
        navId: 0, // 导航Id
        videoId: "0v0", // 视频 id 标识
        navList: [],
        navListId: [], // 分类视频对应播放id
        videoState: false,
        videoBord: "cover",
        nowPlayId: "",
        pinlun: [],

      };
    },
    async onLoad() {
      await this.getVideoList();
      this.navList = ["人才", "雇主", "合伙人", "推荐", "关注"];
      // 分类对应视频id
      let obj = [{
          id: 0,
          index: 0,
        },
        {
          id: 1,
          index: 0,
        },
        {
          id: 2,
          index: 0,
        },
        {
          id: 3,
          index: 0,
        },
        {
          id: 4,
          index: 0,
        },
      ];

      this.navListId = [...obj];
    },
    methods: {
      // ...mapMutations('m_video', ['changeVideo']),
      changeLike(id, likeInfo) {
        let video = this.videoList.find((item) => item._id === id);
        if (likeInfo === 0) {
          video.like = 1;
          video.like_n += 1;
        } else {
          video.like = 0;
          video.like_n -= 1;
        }
      },
      changeCollect(id) {
        let video = this.videoList.find((item) => item._id === id);
        video.flag = !video.flag;
		if (video.flag) {
		  video.sms_n += 1;
		} else {
		  video.sms_n -= 1;
		}
      },
      // 关闭弹窗
      popupClose() {
        this.$refs.popup.close();
      },

      change(e) {
        // console.log("当前模式：" + e.type + ",状态：" + e.show);
      },
      // 设置弹窗
      toggle(type, info) {

        this.$refs.popup.open(type);
        this.pinlun = info;
      },

      // 点击导航事件
      toNav(index) {
        uni.createVideoContext(this.videoId).pause();
        this.navId = index;
        let videoIndex = 0;
        this.navListId.forEach((item) => {
          if (item.id === index) {
            videoIndex = item.index;
          }
        });
        this.videoIndex = videoIndex;
        this.videoId = index + "v" + videoIndex;
      },
      // 监听视频播放进度
      timeUpdate(event) {
        // 当前进度数据
        let videoTimeObj = {
          id: event.currentTarget.id,
          currentTime: event.detail.currentTime,
        };

        // 判断播放记录
        let videoItem = this.videoUpdateTime.find(
          (item) => item.id === videoTimeObj.id
        );
        //
        if (videoItem) {
          videoItem.currentTime = event.detail.currentTime;
        } else {
          this.videoUpdateTime.push(videoTimeObj);
        }

      },
      // 视频播放结束回调
      handleEnded(event) {
        // 移除记录播放时长数组中当前视频的对象
        this.videoUpdateTime.splice(
          this.videoUpdateTime.findIndex(
            (item) => item.id === event.currentTarget.id
          ),
          1
        );
      },
      // 播放事件
      handleVideo(event) {
        let id = event.currentTarget.id;
        // 创建控制video标签的实例对象
        this.videoContext = uni.createVideoContext(id);
        // 判断当前视频之前是否播放过，有则跳转到指定位置

        let videoItem = this.videoUpdateTime.find((item) => item.id === id);
        if (videoItem) {
          this.videoContext.seek(videoItem.currentTime);
        }
      },
      handelBord() {
        let videoContent = uni.createVideoContext(this.videoId);
        uni.getVideoInfo((videoContent) => {
          success: {}
        });
      },

      // 切换视频事件回调
      swiperYChange(e) {
        uni.createVideoContext(this.videoId).pause();

        let index = e.detail.current;
        this.navListId[this.navId].index = index;

        this.videoIndex = index;
        this.videoId = this.navId + "v" + index;
        uni.createVideoContext(this.videoId).play();
        let length = this.videoList.length;
		if(index === length - 1) {
			this.getVideoList();
		}
        // if ((index != 0) & (index === length - 1)) {
        //   this.getVideoList();
        // }
      },
      swiperXChange(e) {

        uni.createVideoContext(this.videoId).pause();
        let index = e.detail.current;
        this.navId = index;
        this.videoId = index + "v" + this.navListId[index].index;
        uni.createVideoContext(this.videoId).play();
      },

      // 获取视频数据
      async getVideoList() {
        let dataList = [];
        uni.request({
          url: "https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video",
          method: "POST",
          data: {
            info: "get_video",
          },
          success: (res) => {
            uni.hideLoading();
            var msg = res.data.data;
            msg.forEach((item) => {
              item.flag = false;
              dataList.push(item);
            });

            this.videoList = [ 
              ...this.videoList,
              ...dataList.slice(2, Math.floor(Math.random() * 5 + 4)),
            ];

          },
        });
      },
    },
  };
</script>

<style lang="scss">
  // 头部区域
  .header {
    background-color: transparent;
    position: absolute;
    top: 60rpx;
    left: 25rpx;
    z-index: 999;

    image {
      width: 60rpx;
      height: 60rpx;
      padding: 0 18rpx;
    }
  }

  /* 导航区域 */
  .nav {
    width: 100%;
    position: absolute;
    top: 150rpx;
    z-index: 999;
    // font-size: ;
    color: #fff;

    .navScroll {
      margin: 0 auto;
      display: flex;
      white-space: nowrap;
      height: 60rpx;
      justify-content: space-around;
      /* margin-bottom: 10rpx; */
    }

    .navItem {
      padding: 0 30rpx;
      font-size: 28rpx;
      height: 60rpx;
      line-height: 60rpx;

      .navCount {
        height: 60rpx;
        box-sizing: border-box;
      }

      .active {
        font-size: 33rpx;
        border-bottom: 3rpx solid #d43c33;
      }
    }
  }

  /* 视频样式 */
  .videoListSwiper {
    height: calc(100vh);
  }

  // 滑动
  .swiperItem {
    video {
      .videoInfo {
        position: absolute;
        left: 30rpx;
        bottom: 80rpx;

        // 信息描述
        .info_tag {
          padding: 10rpx 0;
          display: flex;
          align-items: top;
        }

        // 展开按钮样式
        .describe {
          font-size: 25rpx;
          line-height: 40rpx;
          color: #fff;
          letter-spacing: 2px;
        }

        :nth-child(1) {
          font-size: 30rpx;
        }
      }

      .container {
        position: absolute;
        right: 40rpx;
        bottom: 250rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;

        // 图标
        .c_icon {
          width: 60rpx;
          height: 60rpx;
          margin: 20rpx 0 0 0;
        }

        cover-view {
          font-size: 20rpx;
          color: #fff;
          line-height: 20rpx;
        }
      }
    }

    .coverView {
      width: 50rpx;
      height: 150rpx;
      margin: auto;
      position: static;
      right: 20rpx;
      top: 50rpx;
      color: #d43c33;
    }
  }

  // 弹出框
  .popup-content {
    height: 800rpx;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    .popup-header {
      position: relative;

      .infoNum {
        height: 60rpx;
        font-size: 25rpx;
        line-height: 60rpx;
        text-align: center;
      }
    }

    // 关闭按钮
    .popup-close {
      position: absolute;
      top: 5rpx;
      right: 30rpx;

      image {
        width: 35rpx;
        height: 35rpx;
      }
    }

    // 内容区域
    .scrollContainer {
      display: flex;

      .infoLeft {
        padding: 0 20rpx;

        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }

      .infoRight {
        font-size: 26rpx;

        .uName {
          font-size: 30rpx;
        }

        .uMessage {
          line-height: 40rpx;
          width: 450rpx;
          // height: 120rpx;
          margin: 10rpx 0;
          letter-spacing: 2rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .oterInfo {
          display: flex;
          line-height: 50rpx;

          .time {
			  color: #69707d;
			  margin-right: 20rpx
		  }

          .uMessage {
		  }
		  .toMessage {
			color: #4e5054
		  }
        }
      }
    }
  }
</style>
